Islands Architecture
静的なHTMLの海に、インタラクティブな「島(Island)」を点在させるWebアーキテクチャパターン。Astroが普及させた。
基本思想
ページ全体をJavaScriptで制御するSPAとは異なり、「静的でよい部分」と「インタラクティブにすべき部分」を明示的に分離する。
[静的HTML] [静的HTML] [インタラクティブ島] [静的HTML] [インタラクティブ島]
インタラクティブな島の部分だけにJavaScriptを送信・実行することで、デフォルトではゼロJSに近い状態を実現する。
部分的ハイドレーションとの関係
Islands Architectureは部分的ハイドレーションの一形態として理解できる。SSRで生成されたHTMLに対して、インタラクティブが必要なコンポーネントだけをハイドレートする。
トレードオフ
- メリット: 初期ロード時間の短縮、コアWebバイタルの改善
- デメリット: 島間のリアルタイムな状態共有が複雑(各島は独立した文脈で動作する)
「ウェブ標準ファースト」との関係
Astroのゼロデフォルトとislands architectureは、ブラウザが標準でサポートする機能を最大限に活用し、JavaScriptを最小化する「ウェブ標準ファースト」という哲学の具体的実装の一つ。